<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        发送消息
    </div>
    <input type="text" id="msgContent"/>
    <input type="button" value="点击发送" onclick="ChAT.chat()"/>

    <div>接收消息</div>
    <div id="receiveMsg" style="background-color: gold;">

    </div>

</body>


<script type="application/javascript">
    window.ChAT={
        socket:null,
        init:function () {
            if (window.WebSocket){
                ChAT.socket=new WebSocket("ws://localhost:8010/ws"),
                ChAT.socket.onopen=function () {
                    console.log("链接建立成功")
                };
                
                ChAT.socket.onclose=function () {
                    console.log("链接关闭")
                };
                ChAT.socket.onerror=function(){
                    console.log("链接发生错误")
                }
                ChAT.socket.onmessage=function (e) {
                    console.log("接收到消息"+e.data)
                    var receiveMsg=document.getElementById("receiveMsg")
                    var html=receiveMsg.innerHTML;
                    receiveMsg.innerHTML=html+'<br/>'+ e.data;
                }
                
            }else {
                alert("您的浏览器不支持websocket...")
            }
        },
        chat:function () {
            var msg=document.getElementById("msgContent")
            ChAT.socket.send(msg.value)
        }
    }

    ChAT.init();
    
</script>
</html>